<template>
  <el-row :gutter="40" justify="space-between">
    <el-col :xs="12" :sm="12" :lg="6">
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>访问量</span>
          <el-tag style="float: right;" type="success">总</el-tag>
        </div>
        <div>
          <div class="mid">
            <count-to :start-val="0" :end-val="visitedNum" :duration="2600" class="card-panel-num" />
            <img class="right-img" src="@/assets/index/time.png" alt="访问量">
          </div>
          <div class="footer">
            <div class="title">总访问数</div>
            <count-to :start-val="0" :end-val="visitedNum" :duration="2600" class="num" />
          </div>
        </div>
      </el-card>
    </el-col>
    <el-col :xs="12" :sm="12" :lg="6">
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>会员数</span>
          <el-tag style="float: right;" type="success">总</el-tag>
        </div>
        <div>
          <div class="mid">
            <count-to :start-val="0" :end-val="memberNum" :duration="2600" class="card-panel-num" />
            <img class="right-img" src="@/assets/index/member.png" alt="访问量">
          </div>
          <div class="footer">
            <div class="title">会员总数</div>
            <count-to :start-val="0" :end-val="memberNum" :duration="2600" class="num" />
          </div>
        </div>
      </el-card>
    </el-col>
    <el-col :xs="12" :sm="12" :lg="6">
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>订单数</span>
          <el-tag style="float: right;" type="success">月</el-tag>
        </div>
        <div>
          <div class="mid">
            <count-to :start-val="0" :end-val="orderNum" :duration="2600" class="card-panel-num" />
            <img class="right-img" src="@/assets/index/order.png" alt="访问量">
          </div>
          <div class="footer">
            <div class="title">总订单数</div>
            <count-to :start-val="0" :end-val="orderNum" :duration="2600" class="num" />
          </div>
        </div>
      </el-card>
    </el-col>
    <el-col :xs="12" :sm="12" :lg="6">
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>交易额</span>
          <el-tag style="float: right;" type="success">月</el-tag>
        </div>
        <div>
          <div class="mid">
            <count-to :start-val="0" :end-val="tradeAmount" :duration="2600" class="card-panel-num" />
            <img class="right-img" src="@/assets/index/trade.png" alt="访问量">
          </div>
          <div class="footer">
            <div class="title">总交易额</div>
            <count-to :start-val="0" :end-val="tradeAmount" :duration="2600" class="num" />
          </div>
        </div>
      </el-card>
    </el-col>
  </el-row>
</template>

<script>
import CountTo from 'vue-count-to'
import {memberNum, orderNum, tradeAmount, visited} from "@/api/webapp/panel";
  export default {
    name: 'PanelGroup',
    components: {CountTo},
    data() {
      return {
        visitedNum: 0,
        memberNum: 0,
        orderNum: 0,
        tradeAmount: 0,
      }
    },
    created() {
      this.getVisited()
      this.getMemberNum()
      this.getOrderNum()
      this.getTradeAmount()
    },
    methods: {
      getVisited() {
        visited().then(res => {
          if (res.success) {
            this.visitedNum = res.data.visitedNum
          }
        })
      },
      getMemberNum() {
        memberNum().then(res => {
          if (res.success) {
            this.memberNum = res.data.memberNum
          }
        })
      },
      getOrderNum() {
        orderNum().then(res => {
          if (res.success) {
            this.orderNum = res.data.orderNum
          }
        })
      },
      getTradeAmount() {
        tradeAmount().then(res => {
          if (res.success) {
            this.tradeAmount = res.data.tradeAmount
          }
        })
      }
    }
  }
</script>

<style scoped>
  .box-card {
    .mid {
      display: flex;
      justify-content: space-between;
      .right-img {
        width: 50px;
        height: 50px;
      }

      .card-panel-num {
        font-weight: 500;
        font-size: 24px;
        height: 50px;
        line-height: 50px;
      }
    }

    .footer {
      margin-top: 15px;
      display: flex;
      justify-content: space-between;
      .title {
        font-weight: 500;
      }
    }
  }
</style>
